@import url(http://fonts.googleapis.com/css?family=PT+Sans+Narrow|Petit+Formal+Script&subset=latin,latin-ext);
/*ページ設定部分（style.cssなどで設定していれば削除する）*/
body, ul, li, h1, h2, span {
	margin: 0;
	padding: 0;
}
body {
	background: #ddd;
	color: #fff;
	font-size: 16px;
	font-family: 'PT Sans Narrow';
}
#container {
	width: 800px;
	margin: 50px auto;
}
/*ここまでページ設定部分*/


/*ここからSimple fading slideshowの設定*/
p.desc strong {
	font-size: 18px;
	padding-bottom: 5px;
	color: #fff;
	font-family: 'Petit Formal Script';
	font-weight: normal;
	display: block;
}
img {
	-webkit-transition: all 0.5s ease-in-out;
	position: relative;
	z-index: 4;
	height: 400px;
	width: auto;
}
#show {
	width: 520px;
	position: relative;
	height: 420px;
	margin: 50px auto;
}
#show .slide {
	border: 10px solid #fff;
	position: absolute;
	top: 0;
	left: 0;
	width: 500px;
	height: 400px;
	overflow: hidden;
	text-align: center;
}
#show .slide p {
	font-size: 13px;
	text-align: left;
	position: relative;
	z-index: 5;
	padding: 5px;
	margin-top: -83px;
	color: #fefefe;
	height: 70px;
	background: rgba(0,0,0,0.8);
}
/* single image - copy from here */

.img1 {
	animation: img1 40s infinite;
	-o-animation: img1 40s infinite;
	-moz-animation: img1 40s infinite;
	-webkit-animation: img1 40s infinite;
}
 @-webkit-keyframes img1 {
0% {
opacity: 0;
}
10% {
opacity: 1;
}
20% {
opacity: 1;
}
30% {
opacity: 0;
}
40% {
opacity: 0;
}
50% {
opacity: 0;
}
60% {
opacity: 0;
}
70% {
opacity: 0;
}
80% {
opacity: 0;
}
90% {
opacity: 0;
}
100% {
opacity: 0;
}
}
 @keyframes img1 {
0% {
opacity: 0;
}
10% {
opacity: 1;
}
20% {
opacity: 1;
}
30% {
opacity: 0;
}
40% {
opacity: 0;
}
50% {
opacity: 0;
}
60% {
opacity: 0;
}
70% {
opacity: 0;
}
80% {
opacity: 0;
}
90% {
opacity: 0;
}
100% {
opacity: 0;
}
}
 @-moz-keyframes img1 {
0% {
opacity: 0;
}
10% {
opacity: 1;
}
20% {
opacity: 1;
}
30% {
opacity: 0;
}
40% {
opacity: 0;
}
50% {
opacity: 0;
}
60% {
opacity: 0;
}
70% {
opacity: 0;
}
80% {
opacity: 0;
}
90% {
opacity: 0;
}
100% {
opacity: 0;
}
}
/* 
to that moment 
then change the number on img{}
also you have to make it right with % (remember!)
*/

.img2 {
	animation: img2 40s infinite;
	-o-animation: img2 40s infinite;
	-moz-animation: img2 40s infinite;
	-webkit-animation: img2 40s infinite;
}
.img3 {
	animation: img3 40s infinite;
	-o-animation: img3 40s infinite;
	-moz-animation: img3 40s infinite;
	-webkit-animation: img3 40s infinite;
}
.img4 {
	animation: img4 40s infinite;
	-o-animation: img4 40s infinite;
	-moz-animation: img4 40s infinite;
	-webkit-animation: img4 40s infinite;
}
.img5 {
	animation: img5 40s infinite;
	-o-animation: img5 40s infinite;
	-moz-animation: img5 40s infinite;
	-webkit-animation: img5 40s infinite;
}

/* keyframing */

@-webkit-keyframes img2 {
0% {
opacity: 0;
}
10% {
opacity: 0;
}
20% {
opacity: 0;
}
30% {
opacity: 1;
}
40% {
opacity: 1;
}
50% {
opacity: 0;
}
60% {
opacity: 0;
}
70% {
opacity: 0;
}
80% {
opacity: 0;
}
90% {
opacity: 0;
}
100% {
opacity: 0;
}
}
 @keyframes img2 {
0% {
opacity: 0;
}
10% {
opacity: 0;
}
20% {
opacity: 0;
}
30% {
opacity: 1;
}
40% {
opacity: 1;
}
50% {
opacity: 0;
}
60% {
opacity: 0;
}
70% {
opacity: 0;
}
80% {
opacity: 0;
}
90% {
opacity: 0;
}
100% {
opacity: 0;
}
}
 @-moz-keyframes img2 {
0% {
opacity: 0;
}
10% {
opacity: 0;
}
20% {
opacity: 0;
}
30% {
opacity: 1;
}
40% {
opacity: 1;
}
50% {
opacity: 0;
}
60% {
opacity: 0;
}
70% {
opacity: 0;
}
80% {
opacity: 0;
}
90% {
opacity: 0;
}
100% {
opacity: 0;
}
}
 @-webkit-keyframes img3 {
0% {
opacity: 0;
}
10% {
opacity: 0;
}
20% {
opacity: 0;
}
30% {
opacity: 0;
}
40% {
opacity: 0;
}
50% {
opacity: 1;
}
60% {
opacity: 1;
}
70% {
opacity: 0;
}
80% {
opacity: 0;
}
90% {
opacity: 0;
}
100% {
opacity: 0;
}
}
 @keyframes img3 {
0% {
opacity: 0;
}
10% {
opacity: 0;
}
20% {
opacity: 0;
}
30% {
opacity: 0;
}
40% {
opacity: 0;
}
50% {
opacity: 1;
}
60% {
opacity: 1;
}
70% {
opacity: 0;
}
80% {
opacity: 0;
}
90% {
opacity: 0;
}
100% {
opacity: 0;
}
}
 @-moz-keyframes img3 {
0% {
opacity: 0;
}
10% {
opacity: 0;
}
20% {
opacity: 0;
}
30% {
opacity: 0;
}
40% {
opacity: 0;
}
50% {
opacity: 1;
}
60% {
opacity: 1;
}
70% {
opacity: 0;
}
80% {
opacity: 0;
}
90% {
opacity: 0;
}
100% {
opacity: 0;
}
}
 @-webkit-keyframes img4 {
0% {
opacity: 0;
}
10% {
opacity: 0;
}
20% {
opacity: 0;
}
30% {
opacity: 0;
}
40% {
opacity: 0;
}
50% {
opacity: 0;
}
60% {
opacity: 0;
}
70% {
opacity: 1;
}
80% {
opacity: 1;
}
90% {
opacity: 0;
}
100% {
opacity: 0;
}
}
 @keyframes img4 {
0% {
opacity: 0;
}
10% {
opacity: 0;
}
20% {
opacity: 0;
}
30% {
opacity: 0;
}
40% {
opacity: 0;
}
50% {
opacity: 0;
}
60% {
opacity: 0;
}
70% {
opacity: 1;
}
80% {
opacity: 1;
}
90% {
opacity: 0;
}
100% {
opacity: 0;
}
}
 @-moz-keyframes img4 {
0% {
opacity: 0;
}
10% {
opacity: 0;
}
20% {
opacity: 0;
}
30% {
opacity: 0;
}
40% {
opacity: 0;
}
50% {
opacity: 0;
}
60% {
opacity: 0;
}
70% {
opacity: 1;
}
80% {
opacity: 1;
}
90% {
opacity: 0;
}
100% {
opacity: 0;
}
}
 @-webkit-keyframes img5 {
0% {
opacity: 1;
}
10% {
opacity: 0;
}
20% {
opacity: 0;
}
30% {
opacity: 0;
}
40% {
opacity: 0;
}
50% {
opacity: 0;
}
60% {
opacity: 0;
}
70% {
opacity: 0;
}
80% {
opacity: 0;
}
90% {
opacity: 1;
}
100% {
opacity: 1;
}
}
 @keyframes img5 {
0% {
opacity: 1;
}
10% {
opacity: 0;
}
20% {
opacity: 0;
}
30% {
opacity: 0;
}
40% {
opacity: 0;
}
50% {
opacity: 0;
}
60% {
opacity: 0;
}
70% {
opacity: 0;
}
80% {
opacity: 0;
}
90% {
opacity: 1;
}
100% {
opacity: 1;
}
}
 @-moz-keyframes img5 {
0% {
opacity: 1;
}
10% {
opacity: 0;
}
20% {
opacity: 0;
}
30% {
opacity: 0;
}
40% {
opacity: 0;
}
50% {
opacity: 0;
}
60% {
opacity: 0;
}
70% {
opacity: 0;
}
80% {
opacity: 0;
}
90% {
opacity: 1;
}
100% {
opacity: 1;
}
}